<template>
  <div class="box">
    <van-nav-bar
      title="注册"
      left-text="返回"
      right-text="登录"
      left-arrow
      @click-right="onClickRight"
      @click-left="onClickLeft"
    />

    <h1>欢迎领养宠物</h1>
    <div class="main">
      <van-form>
        <van-field
          v-model="username"
          name="pattern"
          required
          label="用户名"
          placeholder="请输入用户名"
          :rules="[{ pattern, message: '请输入正确内容' }]"
        />

        <!-- 输入密码 -->
        <van-field
          v-model="password"
          type="password"
          required
          name="validator"
          label="密码"
          placeholder="密码"
          :rules="[{ validator, message: '请输入正确内容' }]"
        />
        <!-- 输入密码 -->
        <van-field
          v-model="password2"
          type="password"
          name="validator"
          required
          label="确认密码"
          placeholder="确认密码"
          :rules="[{ validator, message: '请输入正确内容' }]"
        />
        <!-- 输入手机号，调起手机号键盘 -->
        <van-field
          label="手机号"
          v-model="mobile"
          :rules="telRules"
          name="mobile"
          required
          placeholder="请输入手机号"
        />

        <!-- <van-field
          v-model="code"
          :rules="codeRules"
          center
          required
          clearable
          label="短信验证码"
          placeholder="请输入短信验证码"
        >
          <template #button>
            <van-button size="small" required>发送验证码</van-button>
          </template>
        </van-field> -->
        <!-- 协议 -->
        <div class="controls">
          <input type="checkbox" v-model="checked" />
          <span>同意协议并注册《用户协议》</span>
        </div>
      </van-form>
      <!-- 完成注册按钮 -->
      <div style="margin: 16px">
        <van-button round block type="danger" @click="checkForm"
          >注册</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      username: "",

      pattern: /^\w{6}$/,
      code: "", // 验证码
      password: "",
      password2: "",
      agree: false,
      checked: false,
      mobile: "", // 手机号码
      // 校验手机号码
      telRules: [
        {
          required: true,
          message: "手机号码不能为空",
          trigger: "onBlur",
        },
        {
          // 自定义校验规则
          validator: (value) => {
            return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(
              value
            );
          },
          message: "请输入正确格式的手机号码",
          trigger: "onBlur",
        },
      ],
      // codeRules: [
      //   {
      //     required: true,
      //     message: "验证码不能为空",
      //     trigger: "onBlur",
      //   },
      // ],
    };
  },
  methods: {
    checkForm() {
      if (
        this.username == "" ||
        this.password == "" ||
        this.mobile == "" ||
        this.password2 == ""
      ) {
        Toast("信息未完善");
        return;
      } else if (this.password != this.password2) {
        Toast("两次密码输入不同");
        return;
      } else if (this.checked == false) {
        Toast("请勾选用户协议");
        return;
      }
      const params = `useName=${this.username}&usePwd=${this.password}&phone=${this.mobile}`;
      console.log(params);
      this.axios.post("/user/reg", params).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          //注册成功
          this.$router.push("/login");
        } else {
          //注册失败
          Toast("用户已存在,换一个试试");
        }
      });
    },
    onClickRight() {
      this.$router.push("/login");
    },
    // 点击返回上一页
    onClickLeft() {
      this.$router.go(-1);
    },
    validator(val) {
      return /^\d{6}$/.test(val);
    },
    // getCode() {
    //   // 局部表单验证
    //   this.$refs.form
    //     .validate("mobile")
    //     .then(() => {
    //       this.$toast.success("验证码获取成功");
    //     })
    //     .catch(() => {
    //       this.$toast.fail("验证码获取失败");
    //     });
    // },
    // submit() {
    //   // 全局表单验证
    //   this.$refs.form
    //     .validate()
    //     .then(() => {
    //       this.$router.push("/login");
    //     })
    //     .catch(() => {
    //       this.$toast.fail("提交失败");
    //     });
    // },
  },
};
</script>
<style scoped>
.box {
  background: url("../assets/1.jpg") center center no-repeat;
  /* div充满全屏 */
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  /* 背景图调整大小: cover */
  background-size: cover;
}
.box .van-button {
  background-color: #fee2cb;
}
.van-nav-bar {
  background-color: #fee2cb;
}

.main {
  background-color: #fee2cb;
  opacity: 80%;
  position: absolute;
  width: 80%;
  height: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}
h1 {
  text-align: center;
  color: #ef7c4f;
  margin-top: 50px;
}
.main .van-button {
  background-color: #ef7c4f;
  border-style: none;
  color: black;
}
.van-cell {
  margin-top: 5px;
  border-radius: 10px;
}
.controls {
  margin-top: 5px;
}
.van-nav-bar__text {
  color: #323233;
}
</style>